<template>
    <div>
        <div class="formContainer">
            <div class="avatarContainer">
                <el-upload
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm jform">
                <el-form-item label="编号" prop="name" label-width="120px">
                    <el-input v-model="ruleForm.id" style="width: 217px;" disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="读者姓名" prop="name" label-width="120px">
                    <el-input v-model="ruleForm.name" style="width: 217px;"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="gender" label-width="120px">
                    <el-select v-model="ruleForm.gender" placeholder="请选择">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="读者所在单位" prop="workplace" label-width="120px">
                    <el-select v-model="ruleForm.workplace" placeholder="请选择">
                        <el-option label="计算机科学学院" value="计算机科学学院"></el-option>
                        <el-option label="医学院" value="医学院"></el-option>
                        <el-option label="城建学院" value="城建学院"></el-option>
                        <el-option label="文学院" value="文学院"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="读者类别" prop="type" label-width="120px">
                    <el-select v-model="ruleForm.type" placeholder="请选择">
                        <el-option label="教师" value="教师"></el-option>
                        <el-option label="本科生" value="本科生"></el-option>
                        <el-option label="专科生" value="专科生"></el-option>
                        <el-option label="硕士研究生" value="硕士研究生"></el-option>
                        <el-option label="博士研究生" value="博士研究生"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="电话" prop="phone" label-width="120px">
                    <el-input v-model="ruleForm.phone" style="width: 217px;"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email" label-width="120px">
                    <el-input v-model="ruleForm.email" style="width: 217px;"></el-input>
                </el-form-item>
                <el-form-item label="帐号状态" prop="status" label-width="120px">
                    <el-select v-model="ruleForm.status" placeholder="请选择">
                        <el-option label="有效" value="有效"></el-option>
                        <el-option label="挂失" value="挂失"></el-option>
                        <el-option label="注销" value="注销"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="密码" prop="password" label-width="120px">
                    <el-input v-model="ruleForm.password" style="width: 217px;"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交修改</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>


        </div>
    </div>
</template>

<script>
    import {mapState} from "vuex";
    import {applyLibraryCard, updateLibraryCardInfo} from "@/api";

    export default {
        name: "",
        data() {
            return {
                params:{},
                imageUrl: '',
                ruleForm: {
                    id: 0,
                    name: '',
                    workplace: '',
                    type: '',
                    gender: '',
                    phone: '',
                    email: '',
                    status: '',
                    password: ''
                },
                rules: {
                    id:[],
                    name: [
                        {required: true, message: '请输入读者姓名', trigger: 'blur'},
                        {min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur'}
                    ],
                    workplace: [
                        {required: true, message: '请选择读者所在单位', trigger: 'change'}
                    ]
                    ,
                    type: [
                        {required: true, message: '请选择读者类型', trigger: 'change'}
                    ],
                    gender: [
                        {required: true, message: '请选择读者性别', trigger: 'change'}
                    ],
                    phone:[
                        {required: true, message: '请输入联系电话', trigger: 'blur'},
                        {max:11,min:11,message: "长度必须是十一位" ,trigger: 'blur'}
                    ],
                    email:[
                        {required: false, message: '请输入邮箱（选填）', trigger: 'blur'},
                    ],
                    status:[
                        {required: true, message: '请选择读者类型', trigger: 'change'}
                    ],
                    password:[
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min:8,message: "长度必须大于八位" ,trigger: 'blur'}
                    ]
                }
            };
        },
        activated() {

            this.ruleForm.id=this.queryResult[0].rdId
            this.ruleForm.name=this.queryResult[0].rdName
            this.ruleForm.gender=this.queryResult[0].rdSex
            this.ruleForm.workplace=this.queryResult[0].rdDept
            this.ruleForm.type=this.queryResult[0].rdTypeName
            this.ruleForm.phone=this.queryResult[0].rdPhone
            this.ruleForm.email=this.queryResult[0].rdEmail
            this.ruleForm.status=this.queryResult[0].rdStatus
            this.ruleForm.password=this.queryResult[0].rdPwd


        },
        computed:{
            ...mapState({
                queryResult: (state) => state.Reader.readerList

            })
        }
        ,
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.params.id=this.ruleForm.id
                        this.params.name=this.ruleForm.name
                        this.params.gender=this.ruleForm.gender
                        this.params.workplace=this.ruleForm.workplace
                        this.params.type=this.ruleForm.type
                        this.params.phone=this.ruleForm.phone
                        this.params.email=this.ruleForm.email
                        this.params.status=this.ruleForm.status
                        this.params.password=this.ruleForm.password
                        this.updateReader(this.params)
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            gotoApply(){
                this.$router.push("/reader/applyForLibraryCard/apply")
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            async updateReader(params={}){
                let response = await updateLibraryCardInfo(params);
                if (response.code==200){
                    alert("办理成功")
                    this.$router.push("/reader/changeLibraryCardInfo")
                }
            }

        }

    }
</script>

<style scoped>
    .formContainer {
        width: 500px;
        margin: 0 auto;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;


    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    .avatarContainer{
        width: 178px;
        height: 178px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        margin-left: 125px;
        margin-bottom: 10px;
        border-radius: 10px;
    }
</style>
